<template>
  <div class="right-card">
    <el-select @change="changeCompany" class="selectBox" v-model="value" placeholder="请选择公司名称" style="width: 220px" popper-class="custom-select-dropdown">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"

        />
      </el-select>
    <m-card :width="438" :height="372" title="员工基本情况">
        
       <div class="ygGroup">
          <div class="yg_total_box">
            <div class="yg_total_item">员工总数<span class="fontBoldNum">{{statics.totalNum}}</span>人</div>
            <div class="yg_total_item">平均年龄<span class="fontBoldNum">{{statics.age}}</span>人</div>
            <div class="yg_total_item">中共党员<span class="fontBoldNum">{{statics.dyTotal}}</span>人</div>
          </div>
          <div class="yg_tabs_group">
            <div @click="()=>{clear(); chartAge()}" :class="isTabKey === 0? 'yg_tabs_group_item yg_tabs_group_item_active':'yg_tabs_group_item'">年龄分布</div>
            <div @click="()=>{clear(); chartEdu()}" :class="isTabKey === 1? 'yg_tabs_group_item yg_tabs_group_item_active':'yg_tabs_group_item'">学历分布</div>
            <div @click="()=>{clear(); chartSex()}" :class="isTabKey === 2? 'yg_tabs_group_item yg_tabs_group_item_active':'yg_tabs_group_item'">性别分布</div>
          </div>
       </div>
       <div class="chartBox" style="width: 100%;height: 196px;">
        <v-chart ref="vChartRef" :option="option" :autoresize="true" />
       </div>
       
    </m-card>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue"
import * as echarts from "echarts"
import mCard from "@/components/mCard/index.vue"
import VChart from "vue-echarts"

const value = ref(0)
const options = ref([

  {
    value: 0,
    label: '江西省财政投资集团有限公司',
  },
  {
    value: 2,
    label: '江西省财政投资集团',
  },
  
])

const changeCompany = (val)=>{
  console.log(val)
}
const vChartRef = ref(null)
const statics = ref({
  totalNum:208,
  age:32.5,
  dyTotal:88
})
const isTabKey = ref(0)
const unifiedTooltip = {
  trigger: "axis",
  axisPointer: { type: "shadow", shadowStyle: { opacity: 0.2 } },
  backgroundColor: "rgba(0,0,0,1)",
  borderWidth: 1,
  borderColor: "#999999",
  textStyle: { color: "#ffffff", fontSize: 10 },
  formatter: params => {
    const [bar] = params;
    if(bar.axisValue === "性别分布"){
       return `${bar.axisValue}<br/>${bar.seriesName}: ${bar.value}`;
    }else{
      return `${bar.seriesName}<br/>${bar.axisValue}: ${bar.value}`;
    }
   
  }
};

const chartSex = ()=>{
  isTabKey.value = 2
  option.value = {
        grid:{
          top:0,
        },
        title: {
          text: "性别分布",
          left: "center",
          show:false
        },
        
        tooltip: {
          ...unifiedTooltip,
          trigger: "item", // 覆盖为饼图专用触发方式
          formatter: "{a} <br/>{b}: {c} ({d}%)", // 饼图专用格式化
        },
        legend: {
          orient: "vertical",
          show:false,
          left: "left",
          data: ["男", "女"],
        },
        series: [
          {
            name: "性别分布",
            type: "pie",
            radius: [20, 80],
            center: ["50%", "50%"],
            roseType: "radius",
            data: [
              {
                value: 1000,
                name: "男",
                itemStyle: {
                  color: "rgba(64, 175, 255, 1)",
                },
              },
              {
                value: 732,
                name: "女",
                itemStyle: {
                  color: "rgba(25, 255, 198, 1)",
                },
              },
            ],
            label: {
              show: true,
              formatter: "{b}: {d}%",
              textStyle: {
                color: '#fff',
                textShadowColor: 'transparent' // 或者直接关闭阴影
              }
            },
            emphasis: {
              itemStyle: {
                // shadowBlur: 10,
                // shadowOffsetX: 0,
                // shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      }
    //   nextTick(()=>{
    //     vChartRef.value?.setOption(option);
    // })
}
const clear = ()=>{
  console.log("clear")
  if(timer.value){
    clearInterval(timer.value)
    timer.value = null
  }
 
}
const chartAge = ()=>{
  isTabKey.value = 0
  option.value = {
      title: {
        text: "个",
        left: "5%",
        top: "8%",
        textStyle: {
          color: "#D3F8F2",
          fontSize: 8,
        },
      },
      grid: {
        left: "12%",
        top: "25%",
        width: "82%",
        height: "55%",
      },
      tooltip: unifiedTooltip,
      color: ["#6BC7F6"],
      xAxis: [
        {
          type: "category",

          axisLine: {
            show: false,
            lineStyle: {
              color: "#435459",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#ffffff",
            fontSize: 10,
            interval: 0,
            padding: [0, 0, 0, 0],
          },
          data: ["25岁及以下", "26 - 35岁", "36 - 45岁", "46 - 55岁", "56岁及以上"],
        },
        {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(0,0,0,0)",
            },
          },
          data: [],
        },
      ],
      yAxis: {
        type: "value",

        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: "#8B9EA4",
          fontSize: 9,
        },
      },
      series: [
        {
          name: "年龄分布",
          type: "pictorialBar",
          symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
          label: {
            show: true,
            position: "top",
            distance: 10,
            color: "#ffffff",
            fontSize: 10,
          },

          data: [
            {
              value: 30,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(64, 175, 255, 1)" },
                  { offset: 1, color: "rgba(64, 175, 255, 0.10)" },
                ]),
              },
            },
            {
              value: 26,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(25, 255, 198, 1)" },
                  { offset: 1, color: "rgba(0, 204, 187, 0.10)" },
                ]),
              },
            },
            {
              value: 24,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(64, 175, 255, 1)" },
                  { offset: 1, color: "rgba(64, 175, 255, 0.10)" },
                ]),
              },
            },
            {
              value: 21,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(25, 255, 198, 1)" },
                  { offset: 1, color: "rgba(0, 204, 187, 0.10)" },
                ]),
              },
            },
            {
              value: 16,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(64, 175, 255, 1)" },
                  { offset: 1, color: "rgba(64, 175, 255, 0.10)" },
                ]),
              },
            },
          ],
        },
        {
          name: "年龄分布",
          type: "custom",
          z: 3,
          xAxisIndex: 1,
          renderItem: (params, api) => {
            const categoryIndex = api.value(0)

            const categoryData = api.value(1)

            const basicsCoord = api.coord([categoryIndex, categoryData])

            const topBasicsYAxis = basicsCoord[1]

            const basicsXAxis = basicsCoord[0]
            return {
              type: "image",
              style: {
                x: basicsXAxis - 5,
                y: topBasicsYAxis - 5,
                width: 10,
                height: 10,
                image:
                  "",
              },
            }
          },
          data: [30, 26, 24, 21, 16],
        },
      ],
    }
    // nextTick(()=>{
    //   vChartRef.value?.setOption(option);
    // })
}
const chartEdu = ()=>{
  isTabKey.value = 1
  option.value = {
    title: {
      text: "个",
      left: "5%",
      top: "8%",
      textStyle: {
        color: "#D3F8F2",
        fontSize: 8,
      },
    },
    grid: {
      left: "12%",
      top: "25%",
      width: "82%",
      height: "55%",
    },
    tooltip: unifiedTooltip,
    color: ["#6BC7F6"],
    xAxis: [
      {
        type: "category",

        axisLine: {
          show: false,
          lineStyle: {
            color: "#435459",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: "#ffffff",
          fontSize: 10,
          interval: 0,
          padding: [0, 0, 0, 0],
        },
        data: ["大专", "本科", "硕士", "博士", "博士以上"],
      },
      {
        axisLine: {
          show: false,
          lineStyle: {
            color: "rgba(0,0,0,0)",
          },
        },
        data: [],
      },
    ],
    yAxis: {
      type: "value",

      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#8B9EA4",
        fontSize: 9,
      },
    },
    series: [
      {
        name: "学历分布",
        type: "pictorialBar",
        symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
        label: {
          show: true,
          position: "top",
          distance: 10,
          color: "#ffffff",
          fontSize: 10,
        },

        data: [
          {
            value: 30,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(64, 175, 255, 1)" },
              { offset: 1, color: "rgba(64, 175, 255, 0.10)" },
            ]),
          },
        },
        {
          value: 26,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(25, 255, 198, 1)" },
              { offset: 1, color: "rgba(0, 204, 187, 0.10)" },
            ]),
          },
        },
        {
          value: 24,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(64, 175, 255, 1)" },
              { offset: 1, color: "rgba(64, 175, 255, 0.10)" },
            ]),
          },
        },
        {
          value: 21,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(25, 255, 198, 1)" },
              { offset: 1, color: "rgba(0, 204, 187, 0.10)" },
            ]),
          },
        },
        {
          value: 16,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(64, 175, 255, 1)" },
              { offset: 1, color: "rgba(64, 175, 255, 0.10)" },
            ]),
          },
        },
      ],
    },
    {
      name: "学历分布",
      type: "custom",
      z: 3,
      xAxisIndex: 1,
      renderItem: (params, api) => {
        const categoryIndex = api.value(0)

        const categoryData = api.value(1)

        const basicsCoord = api.coord([categoryIndex, categoryData])

        const topBasicsYAxis = basicsCoord[1]

        const basicsXAxis = basicsCoord[0]
        return {
          type: "image",
          style: {
            x: basicsXAxis - 5,
            y: topBasicsYAxis - 5,
            width: 10,
            height: 10,
            image:
              "",
          },
        }
      },
      data: [30, 26, 24, 21, 16],
    },
  ],
}
    // nextTick(()=>{
    //   vChartRef.value?.setOption(option);
    // })
}

const option = ref({
  title: {
    text: "个",
    left: "5%",
    top: "8%",
    textStyle: {
      color: "#D3F8F2",
      fontSize: 8,
    },
  },
  grid: {
    left: "12%",
    top: "25%",
    width: "82%",
    height: "55%",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      shadowStyle: { opacity: 0.2 },
    },
    backgroundColor: "rgba(0,0,0,1)",
    borderWidth: 1,
    borderColor: "#999999",
    textStyle: {
      color: "#ffffff",
      fontSize: 10,
    },
  },
  color: ["#6BC7F6"],
  xAxis: [
    {
      type: "category",

      axisLine: {
        show: false,
        lineStyle: {
          color: "#435459",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#ffffff",
        fontSize: 10,
        interval: 0,
        padding: [0, 0, 0, 0],
      },
      data: ["25岁及以下", "26 - 35岁", "36 - 45岁", "46 - 55岁", "56岁及以上"],
    },
    {
      axisLine: {
        show: false,
        lineStyle: {
          color: "rgba(0,0,0,0)",
        },
      },
      data: [],
    },
  ],
  yAxis: {
    type: "value",

    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      color: "#8B9EA4",
      fontSize: 9,
    },
  },
  series: [
    {
      name: "",
      type: "pictorialBar",
      symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
      label: {
        show: true,
        position: "top",
        distance: 10,
        color: "#ffffff",
        fontSize: 10,
      },

      data: [
        {
          value: 30,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(64, 175, 255, 1)" },
              { offset: 1, color: "rgba(64, 175, 255, 0.10)" },
            ]),
          },
        },
        {
          value: 26,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(25, 255, 198, 1)" },
              { offset: 1, color: "rgba(0, 204, 187, 0.10)" },
            ]),
          },
        },
        {
          value: 24,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(64, 175, 255, 1)" },
              { offset: 1, color: "rgba(64, 175, 255, 0.10)" },
            ]),
          },
        },
        {
          value: 21,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(25, 255, 198, 1)" },
              { offset: 1, color: "rgba(0, 204, 187, 0.10)" },
            ]),
          },
        },
        {
          value: 16,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(64, 175, 255, 1)" },
              { offset: 1, color: "rgba(64, 175, 255, 0.10)" },
            ]),
          },
        },
      ],
    },
    {
      name: "",
      type: "custom",
      z: 3,
      xAxisIndex: 1,
      renderItem: (params, api) => {
        const categoryIndex = api.value(0)

        const categoryData = api.value(1)

        const basicsCoord = api.coord([categoryIndex, categoryData])

        const topBasicsYAxis = basicsCoord[1]

        const basicsXAxis = basicsCoord[0]
        return {
          type: "image",
          style: {
            x: basicsXAxis - 5,
            y: topBasicsYAxis - 5,
            width: 10,
            height: 10,
            image:
              "",
          },
        }
      },
      data: [30, 26, 24, 21, 16],
    },
  ],
})
const timer = ref(null)
const i = ref(0)
const changeOption = ()=>{
  if(vChartRef.value){
    i.value ++
    if(i.value==3){
      i.value = 0
    }
  
    if(i.value==0){
      chartAge()
    }else if(i.value == 1){
      chartEdu()
    }else{
      chartSex()
    }
  }
  
  

}
onMounted(()=>{
  nextTick(()=>{
    timer.value = setInterval(()=>{
        changeOption()
      
    },3000)
  })
})


</script>

<style scoped lang="scss">
.right-card{
  position: relative;
}
.ygGroup{
  padding: 20px 24px;
  .yg_total_box{
    display: flex;
    justify-content: space-between;
    height: 36px;
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    color: #C2DAFF;
    line-height: 36px;
    background: linear-gradient( 90deg, rgba(15,55,115,0) 0%, #0F3D82 50%, rgba(15,55,115,0) 100%);
    
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(77, 141, 202, 0), rgba(62, 133, 202, 1), rgba(63, 134, 202, 0)) 1 1;
    border-image-slice: 1; /* 确保渐变完整显示 */
    .fontBoldNum{
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 36px;
    }
  }
}
.ygGroup::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient( 180deg, #112F5F 0%, rgba(8,58,123,0.68) 100%);
  opacity: 0.2;
  z-index: -1;

}
.yg_tabs_group{
  margin-top: 11px;
  .yg_tabs_group_item{
    width: 56px;
    height: 20px;
    line-height: 20px;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 38px;
    cursor: pointer;

  }
  .yg_tabs_group_item_active::after{
    position: absolute;
    content:'';
    width: 100%;
    height: 3px;
    background: #28C8FF;
    left: 0;
    bottom: 2px;

  }
}
.selectBox{
  position: absolute;
  top: 0;
  right: 0;
}

:deep(.el-select__popper .custom-select-dropdown) {
  background: #254277 !important;
  border: 1px solid #254277 !important;
}
</style>
